<template>
  <div class="market-cate-menu clearfix">
    <div class="title" v-if="title"><icon-svg name="iconMenu"></icon-svg>{{ title }}</div>
    <ul>
      <li
        v-for="(menu, index) in menus[actived]"
        :key="menu.catalogId"
        @mouseenter="show(index)"
        @mouseleave="show(-1)"
        :class="{ show: showMenu && showIndex === index }"
      >
        <span class="menu">{{ menu.catalogNm }}<i class="el-icon-arrow-right"></i></span>
        <div class="market-cate-part">
          <div class="cate-handler top" @click="scrollCate(1)"><i class="el-icon-arrow-up"></i></div>
          <div class="cate-handler bottom" @click="scrollCate(-1)"><i class="el-icon-arrow-down"></i></div>
          <div class="market-cate-part-con">
            <dl v-for="cate in menu._children" :key="cate.catalogId">
              <dt @click="onSearch(cate.catalogId)">
                <span>{{ cate.catalogNm }}</span>
                <i class="el-icon-arrow-right" v-if="cate._children"></i>
              </dt>
              <dd v-if="cate._children">
                <span v-for="catalog in cate._children" :key="catalog.catalogId" @click="onSearch(catalog.catalogId)">
                  {{ catalog.catalogNm }}
                </span>
              </dd>
              <dd v-else><span class="rid">无下级分类</span></dd>
            </dl>
          </div>
        </div>
      </li>
      <li>
        <span @click="changePage('prev')" :class="{ notAllow: actived <= 0 }"><i class="el-icon-arrow-left"></i></span>
        <span @click="changePage('next')" :class="{ notAllow: actived >= menus.length - 1 }">
          <i class="el-icon-arrow-right"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import utils from '@/plugins/utils'
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      menus: [],
      showMenu: false,
      showIndex: 0,
      actived: 0
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/catalogNav'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          var list = utils.arrayToTree(data.data, {
            id: 'catalogId',
            pid: 'parentCatalogId',
            mainSort: 'catalogLevel'
          })
          let result = []
          for (let i = 0; i < list.length; i += 10) {
            result.push(list.slice(i, i + 10))
          }
          this.menus = result
        } else {
          // 失败后执行的操作
        }
      })
    },
    show(index) {
      this.showIndex = index
      this.showMenu = index === -1 ? false : true
    },
    changePage(type) {
      if (type === 'prev') {
        if (this.actived > 0) this.actived--
      } else {
        if (this.actived < this.menus.length - 1) this.actived++
      }
    },
    onSearch(id) {
      this.showIndex = -1
      this.$emit('cateClick', id)
    },
    scrollCate(tag) {
      let cate = document
        .getElementsByClassName('market-cate-menu')[0]
        .getElementsByClassName('show')[0]
        .getElementsByClassName('market-cate-part')[0]
        .getElementsByClassName('market-cate-part-con')[0]
      let scrollTop = cate.scrollTop
      let clientHeight = cate.clientHeight
      let scrollHeight = cate.scrollHeight
      if (tag > 0) {
        if (scrollTop <= 0) return
        cate.scrollTop = scrollTop - 100
      } else {
        if (scrollTop + clientHeight >= scrollHeight) return
        cate.scrollTop = scrollTop + 100
      }
    }
  }
}
</script>

<style lang="scss">
.market-cate-menu {
  position: relative;
  .title {
    float: left;
    width: 100%;
    font-size: 16px;
    padding: 0 20px;
    line-height: 40px;
    color: #fff;
    background-color: #4053b5;
    svg {
      width: 18px;
      height: 18px;
      margin: -5px 10px 0 0;
      vertical-align: middle;
    }
  }
  ul {
    float: left;
    width: 100%;
    height: 440px;
    padding: 0 0 40px 0;
    margin: 0;
    color: #fff;
    background-color: #374bab;
    overflow-y: auto;
    li {
      list-style-type: none;
      .menu {
        display: inline-block;
        padding: 0 20px;
        width: 100%;
        line-height: 40px;
        position: relative;
        cursor: pointer;
        z-index: 101;
      }
      i {
        float: right;
        margin-top: 12.5px;
        transition: all 0.1s linear;
      }
      &:last-of-type {
        height: 40px;
        margin: 0;
        text-align: center;
        line-height: 40px;
        color: #fff;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        span {
          display: inline-block;
          width: 50%;
          height: 100%;
          cursor: pointer;
          &.notAllow {
            cursor: not-allowed;
          }
          i {
            color: #b5c2c9;
            float: none;
          }
        }
        &:after {
          height: 1px;
          content: '';
          background-color: #727fc6;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          z-index: 102;
          transform: scaleY(0.5);
        }
      }
      &.show {
        .menu {
          font-weight: bold;
          background-color: #4f60b8;
          i {
            transform: translateX(10px);
          }
        }
        .market-cate-part {
          display: block;
        }
      }
      .market-cate-part {
        width: 650px;
        background-color: #4f60b8;
        padding: 20px 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 248px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
        z-index: 100;
        display: none;
        .cate-handler {
          height: 20px;
          text-align: center;
          position: absolute;
          left: 0;
          right: 0;
          opacity: 0.1;
          cursor: pointer;
          &.top {
            top: 0;
            border-bottom: 1px solid $border-color;
          }
          &.bottom {
            bottom: 0;
            border-top: 1px solid $border-color;
          }
          &:hover {
            opacity: 1;
          }
          i {
            float: none;
            margin-top: 0;
          }
        }
        .market-cate-part-con {
          width: 100%;
          height: 100%;
          padding: 0 20px;
          overflow-y: auto;
          dl {
            color: #8fbdf4;
            min-height: 35px;
            dt {
              display: inline-block;
              font-weight: bold;
              padding: 10px 20px 10px 0;
              cursor: pointer;
              i {
                float: none;
              }
              span {
                display: inline-block;
                padding: 5px;
                border-radius: 2px;
                &:hover {
                  color: #fff;
                  background-color: #89c1ed;
                  cursor: pointer;
                }
              }
            }
            dd {
              margin-left: 20px;
              color: #fff;
              border-bottom: 1px dashed #6375ca;
              span {
                display: inline-block;
                margin: 5px 10px;
                padding: 5px;
                border-radius: 2px;
                &:not(.rid):hover {
                  background-color: #89c1ed;
                  cursor: pointer;
                }
              }
            }
          }
        }
        &:after {
          width: 20px;
          content: '';
          background-color: #4f60b8;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}
</style>
